<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket测试</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        /* 添加简单样式便于观察 */
        #messages {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="messageInput" placeholder="输入广播消息测试" style="width: 300px;"/>
    <button onclick="sendBroadcastMessage()">发送广播消息</button>
</div>
<div>
    <input type="text" id="privateUserId" placeholder="输入接收用户的userId" style="width: 150px;"/>
    <input type="text" id="privateMessageInput" placeholder="输入私有消息测试" style="width: 150px;"/>
    <button onclick="sendPrivateMessage()">发送私有消息</button>
</div>
<div id="messages"></div>

<script>
    // 连接配置
    const serverUrl = 'http://localhost:8080/ws';
    const broadcastSendEndpoint = "/app/chat";
    const privateSendEndpoint = "/app/private";
    const broadcastSubscribeEndpoint = "/topic/messages";

    // 初始化连接
    const socket = new SockJS(serverUrl);
    const stompClient = Stomp.over(socket);

    const userId = prompt('请输入你的userId');

    stompClient.connect({}, function(frame) {
        console.log('连接成功:', frame);

        // 订阅广播消息
        stompClient.subscribe(broadcastSubscribeEndpoint, function(response) {
            const msg = response.body;
            showMessage('收到广播回复: ' + msg);
        });

        // 订阅私有消息
        stompClient.subscribe('/user/' + userId + '/queue/private', function(response) {
            const msg = response.body;
            showMessage('收到私有回复: ' + msg);
        });
    }, function(error) {
        console.error('连接失败:', error);
    });

    function sendBroadcastMessage() {
        const input = document.getElementById('messageInput');
        if (input.value.trim() && stompClient) {
            stompClient.send(broadcastSendEndpoint, {}, input.value);
            showMessage('已发送广播消息: ' + input.value);
            input.value = '';
        }
    }

    function sendPrivateMessage() {
        const privateUserIdInput = document.getElementById('privateUserId');
        const privateMessageInput = document.getElementById('privateMessageInput');
        const targetUserId = privateUserIdInput.value;
        const privateMessage = privateMessageInput.value;
        if (targetUserId && privateMessage && stompClient) {
            stompClient.send(privateSendEndpoint, {userId: targetUserId}, privateMessage);
            showMessage('已向用户 ' + targetUserId + ' 发送私有消息: ' + privateMessage);
            privateUserIdInput.value = '';
            privateMessageInput.value = '';
        }
    }

    function showMessage(content) {
        const div = document.createElement('div');
        div.textContent = '[' + new Date().toLocaleTimeString() + '] ' + content;
        document.getElementById('messages').appendChild(div);
    }
</script>
</body>
</html>